import { useEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [item, setItem] = useState("");

  const [listItem, setListItem] = useState([
    { id: 1, name: "React" },
    { id: 2, name: "vue" },
    { id: 3, name: "java" },
    { id: 4, name: "javascript" },
  ]);

  const addListItem = () => {
    listItem.push({ id: listItem.length + 1, name: item });
    setItem("");
  };

  useEffect(() => {
    console.log("页面加载完成");
    fetch("/api/hello")
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, []);

  return (
    <>
      <div>
        <input type="text" value={item} onChange={(event) => setItem(event.target.value)} />
        <button className={"my-button"} onClick={addListItem}>
          增加
        </button>
        {listItem.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </>
  );
}

export default App;
